<template>
    <el-dialog
    :title="'角色权限-'+userInfo.name"
    :visible.sync="dialogVisible"
    width="500px"
    custom-class="role-authorization-dialog"
    >
    <div class="role-authorization-box">
        <el-row class="role-item">
            <el-col :span="4">分配角色</el-col>
            <el-col :span="20">
                <el-select v-model="userType">
                    <el-option v-for="item in typeArray" :key="item.value"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row class="role-item">
            <el-col :span="24">增加权限</el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="authorization-tree-box">
                    <el-tree
                    :data="data2"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    >
                    </el-tree>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="footer" slot="footer">
        <el-button size="small" @click="close">关闭</el-button>
        <el-button size="small" type="primary" @click="save">保存</el-button>
    </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'RoleAuthorizationDialog',
    props: {
        userInfo: {
            type: Object,
            default () {
                return {}
            }
        },
        typeArray: {
            type: Array,
            default () {
                return []
            }
        },
        showDialog: {
            type: Boolean,
            default () {
                return false
            }
        }
    },
    data () {
        return {
            dialogVisible: false,
            userType: '',
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }]
        }
    },
    methods: {
        save () {
        },
        close () {
            this.dialogVisible = false
        }
    },
    watch: {
        'dialogVisible' (state) {
            if (!state) {
                this.$emit('closeAuthorization')
            }
        },
        'showDialog' (state) {
            if (state) {
                this.dialogVisible = true
            }
        }
    }
}
</script>
<style lang="less">
.role-authorization-dialog {
    .role-item {
        height: 30px;
        line-height: 30px;
        width: 100%;
        .el-select {
            width: 100%;
            .el-input{
                width: 100% !important;
            }
        }
    }
    .el-row{
        .authorization-tree-box {
            width: 100%;
            height: 400px;
            border: 1px solid #eee;
            box-sizing: border-box;
            padding: 20px;
            overflow: auto;
        }
    }
}
</style>
